import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import './index.less';
export default function ChartLine(props) {
  const { v } = props;

  const chartRef = useRef(null);
  const [myChart, setMyChart] = useState(null);
  const [echartsInterval, setEchartsInterval] = useState(null);

  useEffect(() => {
    renderChart();
  }, []);

  useEffect(() => {
    activeEcharts(-1, v.length);
  }, [myChart]);

  const renderChart = () => {
    const option = getChartOption();
    let chartInstance = null;
    const chart = echarts.getInstanceByDom(chartRef.current);
    if (chart) {
      chartInstance = chart;
    } else {
      chartInstance = echarts.init(chartRef.current, 'dark');
    }
    setMyChart(chartInstance);
    chartInstance.setOption(option);
  };

  const activeEcharts = (currentIndex, all) => {
    // 数据长度
    let dataLength = all;
    // 清空tooltip定时器
    clearTimeout(echartsInterval);
    // 加载tooltip定时器
    const interval = setTimeout(() => {
      // 获取当前显示第几个数据，从0 开始。（取 显示次数除以数据长度的余数）
      currentIndex = (currentIndex + 1) % dataLength;
      // echarts的触发图表行为
      myChart.dispatchAction({
        type: 'showTip', // 触发的行为
        seriesIndex: 0, // 触发的数据对应的坐标系（通常只有一个y轴，取0）
        dataIndex: currentIndex, // 第几个数据显示toolTip
      });
      activeEcharts(currentIndex, all);
    }, 2000);
    setEchartsInterval(interval);
  };

  const getChartOption = () => {
    // 数据
    const optionList = v;

    let sum = 0;
    optionList.forEach((ele) => {
      sum += ele.value;
    });

    const total = 100; // 数据总数
    const datas = [];
    optionList.forEach((item) => {
      datas.push(item.value);
    });
    // console.log('optionList:', optionList);

    const width4 = (screen.width * 4) / 1920;
    const width8 = (screen.width * 8) / 1920;
    const width18 = (screen.width * 14) / 1920;
    const width20 = (screen.width * 20) / 1920;
    const width22 = (screen.width * 22) / 1920;
    const width40 = (screen.width * 40) / 1920;
    const width70 = (screen.width * 75) / 1920;

    const fontSize14 = (screen.width * 12) / 1920;

    const height4 = (screen.height * 4) / 1080;

    const option = {
      backgroundColor: 'transparent',
      color: ['#61D8FF', '#61FF79'],
      tooltip: {
        // trigger: 'axis',
        // backgroundColor: 'rgb(0, 33, 82)',
        // textStyle: {
        //   fontSize: fontSize14,
        //   color: 'white',
        // },
        // borderColor: '#4da0f8d6',
        // formatter: (v, b) => {
        //   console.log('v', v, b);
        //   var text;
        //   // var pro = Math.floor((params.data.value / sum) * 100) + '%';
        //   // text = '{a|  ' + pro + '}{b|  ' + params.data.value + '}';
        //   // var pro = Math.floor((params.data.value / 100) * 100) + '%';
        //   // text = '{a|  ' + pro + '}';
        //   return text;
        // },
        // rich: {
        //   a: {
        //     color: '#ffffff',
        //   },
        //   b: {
        //     color: '#18FEFE',
        //   },
        // },
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgb(0, 33, 82)',
        textStyle: {
          fontSize: fontSize14,
          color: 'white',
        },
        formatter: (params, b) => {
          // console.log('v', params, b);
          var text;
          // var pro = Math.floor((params.data.value / sum) * 100) + '%';
          // text = '{a|  ' + pro + '}{b|  ' + params.data.value + '}';
          var pro = Math.floor((params.data.value / 100) * 100) + '%';
          text = `${params.data.name}    ${pro}`;
          return text;
        },
        rich: {
          a: {
            color: '#ffffff',
          },
          b: {
            color: '#18FEFE',
          },
        },
      },
      legend: {
        show: false,
      },
      grid: {
        left:width70,
        right: '14%',
        bottom: '3%',
        top: '3%',
      },
      xAxis: {
        max: total,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          data: optionList,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: 'category',
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#fff',
              fontSize: width18,
              fontFamily: 'PingFangSC-Regular',
            },
            formatter: function (val) {
              return `${val}%`;
            },
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: optionList,
        },
      ],
      series: [
        {
          type: 'bar',
          data: optionList,
          symbol: 'none',
          barWidth: width18,
          z: 1,
          yAxisIndex: 0,
          animationEasing: 'elasticOut',
          // showBackground: true,
          // backgroundStyle: {
          //   color: 'rgba(207, 41, 41, 1)',
          // },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 0, //上
              colorStops: [
                {
                  offset: 0.1,
                  color: 'rgba(1, 143, 244, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(74, 224, 255, 1)', // 100% 处的颜色
                },
              ],
            },
          },
          label: {
            normal: {
              show: true,
              position: 'left',
              formatter: '{b}',
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
          },
        },
        {
          // 分隔
          type: 'pictorialBar',
          itemStyle: {
            normal: {
              color: 'rgba(55, 113, 176, 1)',
            },
          },
          symbolRepeat: 'fixed',
          symbolMargin: width4,
          symbol: 'rect',
          symbolClip: true,
          symbolSize: [width8, width20],
          symbolPosition: 'start',
          symbolOffset: [-4, -1],
          symbolBoundingData: total,
          data: optionList,
          z: 2,
          animationEasing: 'elasticOut',
        },

        {
          type: 'bar', //边框
          barGap: '-130%', // 设置外框粗细
          data: optionList,
          barWidth: width22,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(55, 113, 176, 1)',
          },
          itemStyle: {
            color: 'rgba(55, 113, 176, 1)', // 填充色
          },
          label: {
            // formatter: (params, index) => {
            //   console.log(params.data.value, sum);
            //   var text;
            //   // var pro = Math.floor((params.data.value / sum) * 100) + '%';
            //   // text = '{a|  ' + pro + '}{b|  ' + params.data.value + '}';
            //   var pro = Math.floor((params.data.value / 100) * 100) + '%';
            //   text = '{a|  ' + pro + '}';
            //   return text;
            // },
            // rich: {
            //   a: {
            //     color: '#ffffff',
            //   },
            //   b: {
            //     color: '#18FEFE',
            //   },
            // },
            // show: true,
            // position: 'right',
            // // formatter: '{b}',
            // textStyle: {
            //   color: '#fff',
            //   fontSize: 14,
            // },
          },
          z: 0,
        },
      ],
    };
    return option;
  };

  return <div className="line_chart" ref={chartRef}></div>;
}
